<!-- 待审批项目详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                </div>
            </div>
            <div>
                <div class="one">
                    <div class="first">
                        <span class="name">项目编号：</span>
                        <span class="con">{{ details.id }}</span>
                    </div>
                    <div class="first">
                        <span class="name">项目名称：</span>
                        <span class="con">{{ details.projectName }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">所属需求编号：</span>
                        <span class="con">{{ details.demandId }}</span>
                    </div>
                    <div class="first">
                        <span class="name">所属需求名称：</span>
                        <span class="con">{{ details.sysDemandApply.demandName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">所属部门：</span>
                        <span class="con">{{ details.sysDemandApply.deptName }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">项目申请人：</span>
                        <span class="con">{{ details.realName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">申请人类型：</span>
                        <span class="con">{{ details.userType }}</span>
                    </div>
                    <div class="first">
                        <span class="name">所在单位：</span>
                        <span class="con">{{ details.academicField }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">申请资金：</span>
                        <span class="con">{{ details.projectFund }}</span>
                    </div>
                    <div class="first">
                        <span class="name">联系地址：</span>
                        <span class="con">{{ details.address }}</span>
                    </div>
                </div>
                <div class="desc">
                    <span class="name">附件：</span>
                    <div v-for="item of fileEntityList" :key="item.fileId" class="text">
                        <el-link style="margin-bottom: 10px;" :href="item.downloadPath">{{ item.fileName }}</el-link>
                    </div>
                </div>
            </div>
        </div>
        <!-- 成员信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>成员信息</span>
                </div>
            </div>
            <div style="margin-bottom: 10px;">
                <el-table border stripe :data="details.membersList" style="width: 90%; margin: 10px 10px;">
                    <el-table-column prop="memberName" label="成员姓名" />
                    <el-table-column prop="memberUnit" label="所在单位" />
                    <el-table-column prop="memberPhone" label="联系电话" />
                    <el-table-column prop="memberArea" label="专业领域" />
                    <el-table-column prop="memberType" label="参与类型" />
                </el-table>
            </div>
        </div>
        <!-- 审批进度 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>审批进度</span>
                </div>
            </div>
            <div class="content">
                <el-steps :active="2" align-center>
                    <el-step title="步骤1" description="初审" />
                    <el-step title="步骤2" description="正在审批" />
                    <el-step title="步骤3" description="正在审批" />
                    <el-step title="步骤4" description="终审" />
                </el-steps>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProjectApprovalInfoDetails',
    data() {
        return {
            details: {},
            fileEntityList: []
        }
    },
    created() {
        this.details = this.$route.query // 获取基本信息数据
        this.fileEntityList = this.$route.query.fileEntityList
        setTimeout(() => { // 页面刷新
            this.$forceUpdate()
        }, 200)
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.text {
    font-size: 14px;
    margin-bottom: 10px;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.one {
    display: flex !important;
}
.name {
    min-width: 62px;
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}
.desc {
    display: flex;
    margin-left: 20px;
    margin-bottom: 25px;
}
.title {
    margin-left: 20px;
}
.con {
    font-size: 14px;
}
i {
    font-style: normal;
}
</style>
